import { reqGethostypeListContentShow } from '@/api/hospital/hospitalList';
import type { hospiatlShow as hospitalcon } from '@/api/hospital/model/hospitalListTypes';
import { Button, Card, Descriptions } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom';

export default function HospitalShow() {
    let navigate = useNavigate();
    
    // 创建 医院详情状态
    let [hospitalcontent,setHospitalcontent] = useState<hospitalcon>();

    //接受id 
    let {id} = useParams();

    useEffect(()=>{
        async function main(){
          let result = await reqGethostypeListContentShow(id as string);
        //   console.log(result);
        setHospitalcontent(result);
          
        }
        main();
    },[])


    return (
        <Card>
            {/* 基本信息 */}
            <Descriptions column={4} title="基本信息" bordered> 
                <Descriptions.Item label="医院名称" span={2}>{hospitalcontent?.hospital.hosname}</Descriptions.Item>
                <Descriptions.Item  label="医院LOGO" span={2}>
                    {
                        hospitalcontent && <img width="100px" src={`data:image/jpeg;base64,${hospitalcontent?.hospital.logoData}`} alt=""></img>
                    }
                    </Descriptions.Item>
                <Descriptions.Item label="医院编码" span={2}>{hospitalcontent?.hospital.hoscode}</Descriptions.Item>
                <Descriptions.Item label="医院地址" span={2}>{hospitalcontent?.hospital.address}</Descriptions.Item>
                <Descriptions.Item label="坐车路线" span={4}>
                {hospitalcontent?.hospital.route}
                </Descriptions.Item>
                
                <Descriptions.Item label="医院简介" span={4}>{hospitalcontent?.hospital.intro}</Descriptions.Item>
            </Descriptions>

            {/* 预约规则信息 */}
            <Descriptions column={4} className='h-20' title="预约规则信息" bordered>
                <Descriptions.Item label="预约周期" span={2}>{hospitalcontent?.bookingRule.cycle}</Descriptions.Item>
                <Descriptions.Item label="放号时间" span={2}>{hospitalcontent?.bookingRule.quitTime}</Descriptions.Item>
                <Descriptions.Item label="停挂时间" span={2}>{hospitalcontent?.bookingRule.stopTime}</Descriptions.Item>
                <Descriptions.Item label="退号时间" span={2}>{hospitalcontent?.bookingRule.quitDay}</Descriptions.Item>
                <Descriptions.Item label="预约规则" span={4}>
                {
                    hospitalcontent?.bookingRule.rule.map((item,index)=>{
                        return <p key={index}>{item}</p>
                    })
                }
                </Descriptions.Item>
            </Descriptions>

            <Button className='h-20' onClick={()=>{
                navigate(-1);
            }}>返回</Button>
        </Card>
    )
}
